<!--
 * @Autor: CQJ
 * @Date: 2022-08-18 22:24:17
 * @LastEditors: CQJ
 * @LastEditTime: 2022-08-19 13:27:03
 * @Description:
-->
<template>
  <div class="homePage">
    <el-card class="box-card" v-for="item in data" :key="item.id">
      <template #header>
        <div class="card-header">
          <span class="card-header-leftText">{{ getName(item.type) }}</span>
          <span class="card-header-rightText" @click="jumpToManage(item.type)"
            >管理</span
          >
        </div>
      </template>
      <div class="card-content">
        <div class="card-content-box">
          <div class="card-content-box-top">
            <p>{{ getNumberText(item.type) }}</p>
            <div>
              <el-tooltip
                placement="top"
                :visible:boolean="`visible${item.type}`"
                v-if="item.introduce || item.introduce2"
              >
                <template #content>
                  <span>{{ item.introduce }}</span>
                </template>
                <el-icon class="icon-color"><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
          <span class="number-style">
            {{ getTypeNumber(item) }}
          </span>
        </div>
        <div class="card-content-box" v-if="item.type == 1 || item.type == 2">
          <p>启用中数量</p>
          <p class="number-style">{{ item.activeNumber }}</p>
        </div>
        <div class="card-content-box" v-if="item.type == 1 || item.type == 2">
          <p>禁用数量</p>
          <p class="number-style">{{ item.activeNumber }}</p>
        </div>
        <div class="card-content-box" v-if="item.type == 3">
          <div class="card-content-box-top">
            <p>定时采集任务</p>
            <div>
              <el-tooltip
                placement="top"
                :visible:boolean="`visible${item.type}`"
                v-if="item.introduce || item.introduce2"
              >
                <template #content>
                  <span>{{ item.introduce2 }}</span>
                </template>
                <el-icon class="icon-color"><InfoFilled /></el-icon>
              </el-tooltip>
            </div>
          </div>
          <span class="number-style">
            {{ item.realTimeCollectTask }}
          </span>
        </div>
        <div class="card-content-box" v-if="item.type == 4">
          <p>未配置</p>
          <p class="number-style">{{ item.noSet }}</p>
        </div>
        <div class="card-content-box" v-if="item.type == 4">
          <p>播放线路</p>
          <p class="number-style">{{ item.playLine }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { toRefs, computed } from 'vue';
import { Dashboard } from '@/types/api/dashboard/dashboard';
import { NAME_TYPE, NUMBER_TYPE } from '../instance';

import { InfoFilled } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
// 引用
interface dataType {
  data: Dashboard[];
}
const props = defineProps<dataType>();
const router = useRouter();
const { data } = toRefs(props);
//methods
const jumpToManage = (type: number) => {
  switch (type) {
    case 1:
      router.push('/sites/site');
      break;
    default:
  }
};
//computeds
const getName = computed(() => (type: number): string => {
  return NAME_TYPE[type];
});
const getTypeNumber = computed(() => (item: Dashboard): number => {
  const type = item.type;
  let num: number;
  switch (type) {
    case 1:
      num = item.number;
      break;
    case 2:
      num = item.number;
      break;
    case 3:
      num = item.activeNumber as number;
      break;
    default:
      num = item.alreadySet as number;
      break;
  }
  return num;
});
const getNumberText = computed(() => (type: number): string => {
  return NUMBER_TYPE[type];
});
</script>

<style lang="scss" scoped>
.icon-color {
  color: #409eff;
}
.number-style {
  font-weight: bold;
  font-size: 22px;
}
.homePage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .box-card {
    width: 49%;
    height: 240px;
    margin: 10px 0;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-leftText {
      font-size: 18px;
      font-weight: bold;
    }
    &-rightText {
      font-size: 18px;
      color: #409eff;
    }
    &-rightText:hover {
      cursor: pointer;
    }
  }
  .card-content {
    display: flex;
    justify-content: center;
    &-box {
      width: 30%;
      text-align: center;
      &-top {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
